<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
	*{margin:0;padding:0;}
		#box{
			width: 480px;
			height: 288px;
			background: url(img/0.png) no-repeat;
			float: left;
			margin-right: 50px;
			background-size: contain;
		}
		#box2{
			width: 400px;
			height: 400px;
			background: url(img/1.jpg) no-repeat;
			float: left;
			display: none;
		}
		#rec{
			width: 100px;
			height: 100px;
			background:url(img/dot.gif) repeat;
			opacity: 0.5;
			position: absolute;
			left: 0;
			top: 0;
			display: none;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oBox=document.getElementById("box");
			var oRec=document.getElementById("rec");
			var oBox2=document.getElementById("box2");
			
			oBox.onmouseover=function(){
				oBox2.style.display="block";
				oRec.style.display="block";
			}
			oBox.onmousemove=function(ev){
				var ev=ev||event;
				var a=ev.clientX-oRec.offsetWidth/2;
				var b=ev.clientY-oRec.offsetHeight/2;
				if(a<0){
					a=0
				}
				if(b<0){
					b=0
				}
				if(a>oBox.offsetWidth-oRec.offsetWidth){
					a=oBox.offsetWidth-oRec.offsetWidth;
				}
				if(b>oBox.offsetHeight-oRec.offsetHeight){
					b=oBox.offsetHeight-oRec.offsetHeight;
				}
				
				oRec.style.left=a+"px";
				oRec.style.top=b+"px";
				
				oBox2.style.backgroundPositionX=-4*a+"px";
				oBox2.style.backgroundPositionY=-4*b+"px";
				
				
			}
			
			
			oBox.onmouseout=function(){
				oBox2.style.display="none";
				oRec.style.display="none";
			}
		};
	</script>
</head>
<body>
	<div id="box">
		<div id="rec"></div>
	</div>
	<div id="box2"></div>
	
</body>
</html>